import { Select } from './index';
import { Canvas, ArgsTable, Story } from '@storybook/addon-docs';
import { ThemeToggle } from '../../stories/theme-toggle';
import { Tooltip } from '../tooltip';
import { StarOutlined, WarnCircleFilled } from '@apitable/icons';

<Meta title="表单组件/Select 下拉框/文档" />

# Select 下拉框

## 使用方式

```jsx
import { Select } from '@apitable/components';
```

## 使用场景

弹出一个下拉菜单供用户选择

示例中 data 数据用来 mock 选项数据集合。结构如下：
```js
const data = [];
for (let i = 0; i < 20; i++) {
  data.push({ label: '这是测试的数据'+ i, value: 'opt' + i });
}
```

## 基本使用

<Canvas>
<ThemeToggle>
  <Select
    options={[
      { label: 'Test data 1', value: 'opt1' },
      { label: 'Test data 2', value: 'opt2' },
      { label: 'Test data 3', value: 'opt3' },
      { label: 'Test data 4', value: 'opt4' },
      { label: 'Test data 5', value: 'opt5' },
      { label: 'Test data 6', value: 'opt6' },
      { label: 'Test data 7', value: 'opt7' },
      { label: 'Test data 8', value: 'opt8' },
    ]}
    value={'opt1'}
  />
</ThemeToggle>
</Canvas>

## 无选项提示

<Canvas>
<ThemeToggle>
  <Select />
</ThemeToggle>
</Canvas>

## 定制宽度

在某些情况下，下拉列表的需要根据内容的长度自定义，如果有这个需求，可以将 `dropdownMatchSelectWidth` 属性设置为 `false`（有最大宽度限制）：

<Canvas>
<ThemeToggle>
  <Select
    options={[
      { label: 'Test data 1', value: 'opt1' },
      { label: 'Test data 2', value: 'opt2' },
      { label: 'Test data 3', value: 'opt3' },
      { label: 'Test data 4', value: 'opt4' },
      { label: 'Test data 5', value: 'opt5' },
      { label: 'Test data 6', value: 'opt6' },
      { label: 'Test data 7', value: 'opt7' },
      { label: 'Test data 888888888888888888', value: 'opt8' },
    ]}
    value={'opt1'}
    dropdownMatchSelectWidth={false}
    triggerStyle={{ width: 100 }}
  />
</ThemeToggle>
</Canvas>

设置该属性默认为 `true`：

<Canvas>
<ThemeToggle>
  <Select
    options={[
      { label: 'Test data 1', value: 'opt1' },
      { label: 'Test data 2', value: 'opt2' },
      { label: 'Test data 3', value: 'opt3' },
      { label: 'Test data 4', value: 'opt4' },
      { label: 'Test data 5', value: 'opt5' },
      { label: 'Test data 6', value: 'opt6' },
      { label: 'Test data 7', value: 'opt7' },
      { label: 'Test data 888888888888888888', value: 'opt8' },
    ]}
    value={'opt1'}
    dropdownMatchSelectWidth
    triggerStyle={{ width: 100 }}
  />
</ThemeToggle>
</Canvas>


## 选项中存在图标

每个选项都可以设置各自的前置 Icon 和后置 Icon，使用的 Icon 需要从 `@apitable/icons` 库中引入。

当选中的选项存在图标，触发器的结果也会默认将 Icon 显示出来。

<Canvas>
<ThemeToggle>
  <Select
    options={[
      { label: 'Test data 1', value: 'opt1', prefixIcon: <StarOutlined />, suffixIcon: <StarOutlined /> },
      { label: 'Test data 2', value: 'opt2', prefixIcon: <StarOutlined />, suffixIcon: <StarOutlined /> },
      { label: 'Test data 3', value: 'opt3', prefixIcon: <StarOutlined />, suffixIcon: <StarOutlined /> },
      { label: 'Test data 4', value: 'opt4', prefixIcon: <StarOutlined />, suffixIcon: <StarOutlined /> },
      { label: 'Test data 5', value: 'opt5', prefixIcon: <StarOutlined />, suffixIcon: <StarOutlined /> },
      { label: 'Test data 6', value: 'opt6', prefixIcon: <StarOutlined />, suffixIcon: <StarOutlined /> },
      { label: 'Test data 7', value: 'opt7', prefixIcon: <StarOutlined />, suffixIcon: <StarOutlined /> },
      { label: 'Test data 888888888888888888', value: 'opt8' },
    ]}
    value={'opt1'}
    dropdownMatchSelectWidth={false}
    triggerStyle={{ width: 100 }}
  />
</ThemeToggle>
</Canvas>

但需要注意的是，触发器本身也可以指定前置 Icon 和后置 Icon，当选中的结果也有相应的 Icon 传入时，触发器指定的 Icon 会比选项的 Icon 权重要高。

## 选项禁用

当某个选项无法选择时，可以给该选项设置 disabled 状态，并且可以提供一个不可选中的理由，当鼠标 hover 在内容区域，会显示该理由。

当一个选项过长导致内容显示不完全会出现省略号，此时悬浮在选项上会显示当前选项的完整内容，如果此刻该选项是 disabled 的，则 disabledTip 的权重会高于内容。

<Canvas>
<ThemeToggle>
  <Select
    options={[
      { label: 'Test data 1', value: 'opt1', disabled: true },
      { label: 'Test data 2', value: 'opt2' },
      { label: 'Test data 3', value: 'opt3' },
      { label: 'Test data 4', value: 'opt4', disabled: true },
      { label: 'Test data 5', value: 'opt5' },
      { label: 'Test data 6', value: 'opt6' },
      { label: 'Test data 7', value: 'opt7' },
      { label: 'Test data 888888888888888888', value: 'opt8' },
    ]}
    value={'opt1'}
    dropdownMatchSelectWidth={false}
    triggerStyle={{ width: 100 }}
  />
</ThemeToggle>
</Canvas>

可以指定禁用说明

<Canvas>
<ThemeToggle>
  <Select
    options={[
      { label: 'Test data 1', value: 'opt1', disabled: true, disabledTip: 'option disabled reason' },
      { label: 'Test data 2', value: 'opt2' },
      { label: 'Test data 3', value: 'opt3' },
      { label: 'Test data 4', value: 'opt4', disabled: true, disabledTip: 'option disabled reason' },
      { label: 'Test data 5', value: 'opt5' },
      { label: 'Test data 6', value: 'opt6' },
      { label: 'Test data 7', value: 'opt7' },
      { label: 'Test data 888888888888888888', value: 'opt8' },
    ]}
    value={'opt1'}
    dropdownMatchSelectWidth={false}
    triggerStyle={{ width: 100 }}
  />
</ThemeToggle>
</Canvas>


选项的后置 Icon 比较特殊，当一个选项处于 `disabled` 状态，前置 Icon 和文字部分都会变成灰色，但是后置 Icon 会保持原有的颜色。并且后置 Icon 也能有自己 hover
状态的提示，在 `suffixIconTip` 中传入内容即可。

<Canvas>
<ThemeToggle>
  <Select
    options={[
      {
        label: 'Test data 1',
        value: 'opt1',
        disabled: true,
        suffixIcon: (
          <Tooltip content={'option disabled reason'}>
              <span style={{ display: 'flex', alignItems: 'center' }}>
                <WarnCircleFilled color="#FFAB00" />
              </span>
          </Tooltip>
        ),
      },
      { label: 'Test data 2', value: 'opt2' },
      { label: 'Test data 3', value: 'opt3' },
      { label: 'Test data 4', value: 'opt4' },
      { label: 'Test data 5', value: 'opt5' },
      { label: 'Test data 6', value: 'opt6' },
      { label: 'Test data 7', value: 'opt7' },
      { label: 'Test data 888888888888888888', value: 'opt8' },
    ]}
    value={'opt1'}
    dropdownMatchSelectWidth={false}
    triggerStyle={{ width: 100 }}
  />
</ThemeToggle>
</Canvas>

## Select 禁用

<Canvas>
<ThemeToggle>
  <Select
    options={[
      { label: 'Test data 1', value: 'opt1', disabled: true },
      { label: 'Test data 2', value: 'opt2' },
      { label: 'Test data 3', value: 'opt3' },
      { label: 'Test data 4', value: 'opt4', disabled: true },
      { label: 'Test data 5', value: 'opt5' },
      { label: 'Test data 6', value: 'opt6' },
      { label: 'Test data 7', value: 'opt7' },
      { label: 'Test data 888888888888888888', value: 'opt8' },
    ]}
    value={'opt1'}
    dropdownMatchSelectWidth={false}
    triggerStyle={{ width: 100 }}
    disabled
  />
</ThemeToggle>
</Canvas>

## 支持搜索和结果高亮

> 搜索英文大小写不敏感。

<Canvas>
<ThemeToggle>
  <Select
    options={[
      { label: 'Test data 1', value: 'opt1' },
      { label: 'Test data 2', value: 'opt2' },
      { label: 'Test data 3', value: 'opt3' },
      { label: 'Test data 4', value: 'opt4' },
      { label: 'Test data 5', value: 'opt5' },
      { label: 'Test data 6', value: 'opt6' },
      { label: 'Test data 7', value: 'opt7' },
      { label: 'Test data 8', value: 'opt8' },
      { label: 'abcdefg', value: 'opt9' },
      { label: 'ABCDEFG', value: 'opt10' },
    ]}
    value={'opt1'}
    dropdownMatchSelectWidth
    triggerStyle={{ width: 100 }}
    openSearch
  />
</ThemeToggle>
</Canvas>

### 搜索支持定制高亮词的样式

<Canvas>
<ThemeToggle>
  <Select
    options={[
      { label: 'Test data 1', value: 'opt1' },
      { label: 'Test data 2', value: 'opt2' },
      { label: 'Test data 3', value: 'opt3' },
      { label: 'Test data 4', value: 'opt4' },
      { label: 'Test data 5', value: 'opt5' },
      { label: 'Test data 6', value: 'opt6' },
      { label: 'Test data 7', value: 'opt7' },
      { label: 'Test data 8', value: 'opt8' },
      { label: 'abcdefg', value: 'opt9' },
      { label: 'ABCDEFG', value: 'opt10' },
    ]}
    value={'opt1'}
    highlightStyle={{
      backgroundColor: '#7B67EE',
      color: '#fff'
    }}
    dropdownMatchSelectWidth
    triggerStyle={{ width: 100 }}
    openSearch
  />
</ThemeToggle>
</Canvas>

## 格式化选择内容

<Canvas>
<ThemeToggle>
  <Select
    options={[
      { label: 'Tom-male', value: 'opt1' },
      { label: 'Jonson-male', value: 'opt2' },
      { label: 'Allen-female', value: 'opt3' },
    ]}
    value={'opt1'}
    dropdownMatchSelectWidth
    triggerStyle={{ width: 100 }}
    renderValue={(option) => {
      return option.label.split('-')[0];
    }}
  />
</ThemeToggle>
</Canvas>

## 选项子组件 `Select.Option`

可以不使用 `options` 属性，而是通过子元素方式添加选项，如下：

<Canvas>
<ThemeToggle>
  <Select
    value={'opt2'}
    dropdownMatchSelectWidth
    triggerStyle={{ width: 100 }}
  >
    {[
      { label: 'Test data 1', value: 'opt1', disabled: true },
      { label: 'Test data 2', value: 'opt2' },
      { label: 'Test data 3', value: 'opt3' },
      { label: 'Test data 4', value: 'opt4' },
      { label: 'Test data 5', value: 'opt5' },
      { label: 'Test data 6', value: 'opt6' },
      { label: 'Test data 7', value: 'opt7' },
      { label: 'Test data 8', value: 'opt8' },
    ].map((option, index) => {
      return (
        <Select.Option
          value={option.value}
          disabled={option.disabled}
          currentIndex={index}
        >
          {option.label}
        </Select.Option>
      );
    })}
  </Select>
</ThemeToggle>
</Canvas>

## API

<ArgsTable of={Select} />

